<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.1/jquery.js"></script>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"
        integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"
        integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd"
        crossorigin="anonymous"></script>
    <link rel="stylesheet" href="https://www.zhangxinxu.com/jq/pagination_zh/lib/pagination.css">
    <script src="https://www.zhangxinxu.com/jq/pagination_zh/lib/jquery.pagination.js"></script>
    <link rel="stylesheet" href="./css/5-2022-11-3-lidare.css">
</head>

<body>
    <nav class="navbar navbar-default movieNav">
        <div class="container-fluid">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
                    data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="#">我爱电影网</a>
            </div>
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav">
                    <li class="active"><a href="#">首页 <span class="sr-only">(current)</span></a></li>
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
                            aria-expanded="false">分类 <span class="caret"></span></a>
                        <ul class="dropdown-menu">
                            <li><a href="#">科幻</a></li>
                            <li><a href="#">动作</a></li>
                            <li><a href="#">娱乐</a></li>
                            <li><a href="#">恐怖</a></li>
                            <li><a href="#">悬疑</a></li>
                            <li><a href="#">剧情</a></li>
                        </ul>
                    </li>
                </ul>
                <form class="navbar-form navbar-left">
                    <div class="form-group">
                        <input type="text" class="form-control">
                    </div>
                    <button type="button" class="btn btn-default">搜索</button>
                </form>
                <ul class="nav navbar-nav navbar-right">
                    <li><a href="#">注册</a></li>
                    <li><a href="#">登录</a></li>
                </ul>
            </div>
        </div>
    </nav>
    <div class="container mgpd-0">
        <div class="jumbotron header-my">
            <h1>我爱电影网</h1>
            <p>我爱电影网，涵盖最新电影、好看的电影、经典电影、电影推荐、免费电影、高清电影在线观看及海量最新电影图文视频资讯，找资源就上我爱电影网。</p>
            <p><a class="btn btn-primary btn-lg" href="#" role="button"
                    style="width: 82px;height:34px;font-size: 14px;">查看更多</a></p>
        </div>
    </div>
    <hr>
    <div class="container">
        <div class="row">
            <div class="col-lg-8 col-md-8 col-sm-6">
                <div class="row movie-list">
                    <!-- 插槽 -->
                </div>
                <div class="row">
                    <div id="Pagination" class="pagination"></div>
                </div>
            </div>
            <div class="col-lg-4 col-md-4 col-sm-6 news-all">
                <div class="new">
                    <div class="new-title newAll">最新电影</div>
                    <div class="new-content newMovie">
                        <!-- 插槽 -->
                    </div>
                </div>
                <div class="new">
                    <div class="new-title hotAll">热门电影</div>
                    <div class="new-content hotMovie">
                        <!-- 插槽 -->
                    </div>
                </div>
            </div>
        </div>
    </div>
    <hr>
    <div class="container mgpd-0">
        <div class="footer">
            <p>CopyRight © 2022 我爱电影网</p>
            <p>专注于电影资源的传播 <a href="#">粤ICP备xx21114号</a></p>
        </div>
    </div>
    <script>
        jQuery(function () {
            callResize();
            callLaypage();
            callList({
                type: "get",
                url: "https://api.52kfw.cn/api/v1/movie/top",
                page: 1,
                size: 10,
                parent: ".newMovie"
            });
            callList({
                type: "get",
                url: "https://api.52kfw.cn/api/v1/movie/hot",
                page: 1,
                size: 10,
                parent: ".hotMovie"
            });
        });
        function callResize() {
            window.onresize = function () {
                if (window.innerWidth <= 767) {
                    jQuery(".item").css({
                        marginRight: "0",
                    });
                } else {
                    jQuery(".item").css({
                        marginRight: "10px"
                    });
                };
            }
        }
        //请求函数
        function callList(options) {
            jQuery.ajax({
                type: options.type,
                data: {
                    page: options.page,
                    size: options.size
                },
                url: options.url,
                success: function (result) {
                    let { result: { movieList } } = result;
                    for (let i = 0; i < movieList.length; i++) {
                        let { createdAt, movieName } = movieList[i];
                        jQuery(`
                            <div class="new-item">
                                <a href="#">${movieName}</a>
                                <span>${createdAt}</span>
                            </div>
                        `).appendTo(options.parent);
                    };
                }
            });
        };
        function callLaypage() {
            let size = 3;
            let page = 1;
            jQuery.ajax({
                type: "get",
                data: {
                    page,
                    size
                },
                url: "https://api.52kfw.cn/api/v1/movie/list",
                success: function (result) {
                    let { result: { total } } = result;
                    let initPagination = function () {
                        // 创建分页
                        $("#Pagination").pagination(total, {
                            num_edge_entries: 1, //边缘页数
                            num_display_entries: 4, //主体页数
                            callback: pageselectCallback,
                            items_per_page: size, //每页显示1项
                            prev_text: "前一页",
                            next_text: "后一页"
                        });
                    };
                    function pageselectCallback(page_index, jq) {
                        getMovieList(page_index + 1, size);
                        return false;
                    }
                    initPagination();
                }
            });
        }
        function getMovieList(page, size) {
            jQuery.ajax({
                type: "get",
                data: {
                    page,
                    size
                },
                url: "https://api.52kfw.cn/api/v1/movie/list",
                success: function (result) {
                    let { result: { movieList } } = result;
                    //分页
                    jQuery(".movie-list").html("");
                    for (let i = 0; i < movieList.length; i++) {
                        let { actors, createdAt, movieName, director, pv, movieImg } = movieList[i];
                        jQuery(`
                            <div class="col-lg-4 col-md-6 mgpd-0">
                                <div class="item">
                                    <div class="item-img">
                                        <img src="https://api.52kfw.cn${movieImg}" alt="">
                                    </div>
                                    <div class="item-name">${movieName}</div>
                                    <div class="item-time">发布时间:<span>${createdAt}</span></div>
                                    <div class="item-actor">演员:<span>${actors.length > 6 ? actors.slice(0, 6) + "..." : actors}</span></div>
                                    <div class="item-director">导演:<span>${director.length > 6 ? director.slice(0, 6) + "..." : director}</span></div>
                                    <div class="item-views">浏览量:<span>${pv}</span></div>
                                    <div class="item-details">详情</div>
                                </div>
                            </div>
                        `).appendTo(".movie-list");
                    }
                }
            });
        }
    </script>
</body>

</html>